<template>
	<div class="my-canvas-setting">
		<el-form :label-width="60" size="small" label-placement="left">
			<el-row :gutter="0">
				<el-col :span="12">
					<el-form-item label="宽度">
						<!-- 尺寸选择 -->
						<el-input-number v-model="width" :disabled="editCanvas.lockScale" @input="changeSizeHandle" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="高度">
						<el-input-number v-model="height" :disabled="editCanvas.lockScale" @input="changeSizeHandle" />
					</el-form-item>
				</el-col>
				<el-form-item label="背景图片">
					<MyImgUploadOne
						v-model="editCanvasConfig.backgroundImage"
						@change="$store.chart.setEditCanvasConfig('selectColor', false)"
					/>
				</el-form-item>
				<el-col :span="8">
					<el-form-item label="背景颜色">
						<el-color-picker show-alpha v-model="editCanvasConfig.background"></el-color-picker>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="背景控制">
						<el-button class="clear-btn" plain :disabled="!editCanvasConfig.backgroundImage" @click="clearImage">
							清除背景
						</el-button>
						<el-button class="clear-btn" plain :disabled="!editCanvasConfig.background" @click="clearColor">
							清除颜色
						</el-button>
					</el-form-item>
				</el-col>
				<el-form-item label="适配方式">
					<el-button-group>
						<el-button
							v-for="item in previewTypeList"
							:key="item.key"
							plain
							:type="editCanvasConfig.previewScaleType === item.key ? 'primary' : ''"
							@click="selectPreviewType(item.key)"
						>
							<el-tooltip trigger="hover" :content="item.desc" effect="light">
								<my-icon class="select-preview-icon" size="18" :icon="item.icon" />
							</el-tooltip>
						</el-button>
					</el-button-group>
				</el-form-item>
			</el-row>
		</el-form>
	</div>
</template>

<script setup>
const { editCanvasConfig, editCanvas } = toRefs($store.chart);

// 修改尺寸
const width = ref(1920),
	height = ref(1080);
watch(
	() => $store.chart.editCanvasConfig,
	(val) => {
		width.value = val.width;
		height.value = val.height;
	},
	{
		immediate: true
	}
);
const changeSizeHandle = debounce(() => {
	$store.chart.editCanvasConfig.width = width.value;
	$store.chart.editCanvasConfig.height = height.value;
	$store.chart.computedScale();
}, 500);

// 适配方式
const previewTypeList = [
	{
		key: 'fit',
		title: '自适应',
		icon: 'Scale',
		desc: '自适应比例展示，页面会有留白'
	},
	{
		key: 'scrollY',
		title: 'Y轴滚动',
		icon: 'FitToWidth',
		desc: 'X轴铺满，Y轴自适应滚动'
	},
	{
		key: 'scrollX',
		title: 'X轴滚动',
		icon: 'FitToHeight',
		desc: 'Y轴铺满，X轴自适应滚动'
	},
	{
		key: 'full',
		title: '铺满',
		icon: 'FitToScreen',
		desc: '强行拉伸画面，填充所有视图'
	}
];

// 清除背景
const clearImage = () => {
	$store.chart.setEditCanvasConfig('backgroundImage', undefined);
	$store.chart.setEditCanvasConfig('selectColor', true);
};

// 清除颜色
const clearColor = () => {
	$store.chart.setEditCanvasConfig('background', undefined);
	if (editCanvasConfig.value.backgroundImage) $store.chart.setEditCanvasConfig('selectColor', false);
};

// 选择适配方式
const selectPreviewType = (key) => {
	$store.chart.setEditCanvasConfig('previewScaleType', key);
};
</script>

<style lang="scss" scoped>
@include b(canvas-setting) {
	padding-top: 20px;
}
</style>
